<%--
  Created by IntelliJ IDEA.
  User: lujiapeng
  Date: 2020/9/16
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<div id="responseText"></div>

    <div>
    一般情况下， 使用数字就可以表示 XMLHttpRequest 对应的状态（readyState）；但是有常量可以直接使用
    DONE: 4
    HEADERS_RECEIVED: 2
    LOADING: 3
    OPENED: 1
    UNSENT: 0
    </div>
    <script type="text/javascript">
        // 1、初始化 XMLHttpRequest 对象
        let xhr = new XMLHttpRequest() ;
        // 当 创建实例完成之后，那么 readyState = 0 (请求未初始化)
        console.log( xhr ) ;
        // 2、 打开与服务器的连接
        let method = "post" ;
        let url =  "${pageContext.request.contextPath}/ajax" ;
        let async = "true" ;
        xhr.open( method , url , async ) ;
        console.log( xhr.readyState ) ; // 1 : 服务器连接已建立
        // 3、设置监听 XMLHttpRequest 状态改变的事件处理函数
        xhr.onreadystatechange = function(){
            console.log( xhr.readyState ) ;
            console.log( xhr ) ;
            if( xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200 ){
                // 此时 表示 整个事情已经结束，并且获取到了响应信息
                // 获取到响应的内容
                console.log( xhr.responseText ) ;
                document.querySelector("#responseText").innerHTML = xhr.responseText ;
            }
        }
        // 4、 设置请求报头
        xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded");
        // 5、发送请求
        let data = "username=zhangsanfeng&password=123"
        xhr.send( data ) ;
    </script>

</body>
</html>
